<!--  -->
<template>
  <div class="navBar-container">
    <div class="navbar-touchfooter">
      <div class="touchfooter-item item-selected" @click="changePage(0)">
        <i class="iconfont">&#xe622;</i>
        <span>首页</span>
      </div>

      <div class="touchfooter-item" @click="changePage(1)">
        <i class="iconfont">&#xe807;</i>
        <span>订单</span>
      </div>

      <div class="touchfooter-item" @click="changePage(2)">
        <i class="iconfont">&#xe605;</i>
        <span>客服</span>
      </div>

      <div class="touchfooter-item" @click="changePage(3)">
        <i class="iconfont">&#xe606;</i>
        <span>我的</span>
      </div>
    </div>
  </div>
</template>

<script>
import { useRouter } from 'vue-router'
import { useStore } from 'vuex';
export default {
  setup() {
    const router = useRouter()
    const store = useStore()
    function changePage(e) {
      switch (e) {
        case 0:
          router.push('/')
          break;
        case 1:
          router.push('/qunar/order')
          break;
        case 2:
          router.push('/qunar/service')
          break;
        case 3:
          router.push({ path: '/qunar/my', query: { userID: store.state.userId } })
          break;
      }
    }
    return {
      changePage
    };
  },
};
</script>
<style scoped>
.navBar-container {
  height: 2.1333rem;
}
.navbar-touchfooter {
  height: 2.1333rem;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  border-top: .0427rem solid #000;
  display: flex;
  justify-content: space-around;
  padding: .2133rem .4267rem;
  box-sizing: border-box;
  z-index: 999;
  background: #fff;
}
.navbar-touchfooter .touchfooter-item{
    flex: 1;
  text-align: center;
}
.navbar-touchfooter .touchfooter-item .iconfont{
    font-size: .8533rem;

}
.navbar-touchfooter .touchfooter-item span{
  display: block;
  font-size: .4267rem;
  padding: .0853rem 0;
}
.item-selected{
  color: #18c0c8;
}
</style>
